<template>
	<div>
		<el-container id="wrap">
			<el-header>
				<containt-header />
			</el-header>
			<el-container>
				<el-aside width="300">
					<keep-alive :include="[StuNavMeau, DomitoryAdminMenu, AdminMasterMenu]">
						<component :is="transCom"></component>
					</keep-alive>
				</el-aside>
				<el-main>
					<div class="breadcrumb-nav">
						<div class="icon">
							<el-icon v-if="userStore.showMenu" @click="userStore.showMenu=false"><Expand /></el-icon>
							<el-icon v-else @click="userStore.showMenu=true"><Fold /></el-icon>
						</div>
						<el-breadcrumb :separator-icon="ArrowRight">
							<template v-for="(routes, index) in routeList" :key="routes">
								<el-breadcrumb-item :to="{ path: routes.path }" @click="handleDelSubNav(index)">{{
									routes.name
								}}</el-breadcrumb-item>
							</template>
						</el-breadcrumb>
					</div>
					<div class="show">
						<router-view v-slot="{ Component }">
							<Transition name="switch">
								<keep-alive>
									<component :is="Component" />
								</keep-alive>
							</Transition>
						</router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
import StuNavMeau from '@/components/menu/StuNavMeau.vue'
import ContaintHeader from '../../components/ContaintHeader.vue'
import DomitoryAdminMenu from '@/components/menu/DomitoryAdminMenu.vue'
import AdminMasterMenu from '@/components/menu/AdminMasterMenu.vue'

import { shallowRef, onBeforeMount, reactive, onUpdated } from 'vue'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/utils/axios/stuReqest'
import { useUserStore } from '@/stores/userStore'
import { ArrowRight } from '@element-plus/icons-vue'

const transCom = shallowRef(StuNavMeau)
const userStore = useUserStore()
const route = useRoute()

//存放历史路由信息
const routeList = reactive([{ path: route.path, name: route.name }])

const handleDelSubNav = (index) => {
	routeList.splice(index, routeList.length - index - 1)
}

onUpdated(() => {
	let rout = {}
	rout.path = route.path
	rout.name = route.name

	let index = routeList.findIndex((item) => item.name === rout.name)
	if (index !== -1) {
		routeList.splice(index + 1)
		return
	}

	routeList.push(rout)
})

onBeforeMount(async () => {
	const level = Number.parseInt(userStore.limts)
	let data = {}
	switch (level) {
		case 0:
			{
				transCom.value = AdminMasterMenu
				;({ data } = await getUserInfo('/man/getManInfo'))
			}
			break
		case 1:
			{
				transCom.value = DomitoryAdminMenu
				;({ data } = await getUserInfo('/hou/getHouInfo'))
			}
			break
		case 2:
			{
				transCom.value = TeaNavMenu
				;({ data } = await getUserInfo('/tea/getTeaInfo'))
			}
			break
		case 3:
			{
				transCom.value = StuNavMeau
				;({ data } = await getUserInfo('/stu/getStuInfo'))
			}
			break
	}

	userStore.userInfo = data
})
</script>

<style scoped lang="scss">
// 切换动画
.switch-enter-active {
	transition: all 0.5s ease-in-out;
}

.switch-enter-from {
	opacity: 0;
	transform: translateX(60px);
}

.breadcrumb-nav {
	display: flex;
	margin-bottom: 15px;
	padding: 10px 5px;
	box-shadow: 2px 2px 5px 5px #cccc;
	align-items: center;
	gap: 0 20px;
	font-size: 25px;
	background: rgb(52,64,78);

	.icon{
		cursor: pointer;
		display: flex;
		color: white;
	}
}



.el-header {
	margin-bottom: 10px;
	box-shadow: 0 5px 5px #ccc;
	margin-top: 1px;
	
}

.el-aside {
	&::-webkit-scrollbar {
		display: none;
	}
}

// 展示区域样式
.el-main {
	padding: 0 10px;
	border-radius: 10px;
	width: 100%;
	// background: #aaa;
}

#wrap{
	justify-content: start;
}
.show{
	width: 100%;
}
</style>
